<template>
    <div class="swiper-container w" id="swipe">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="javascript:void(0);">
                    <img src="./images/banner01.jpg" alt="">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:void(0);">
                    <img src="./images/banner02.jpg" alt="">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:void(0);">
                    <img src="./images/banner03.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper"

    export default {
        name: "Swipe",
        methods: {
            lbtInit() {
                var mySwiper = new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: true,
                    },
                    mousewheel: false, // 鼠标控制
                    autoplayDisableOnInteraction:false,// 用户控制后是否停止轮播
                })
            }
        },
        created() {

        },
        mounted() {
            this.lbtInit()
        }
    }
</script>

<style scoped lang="less">
    #swipe {
        margin-top: 60px;

        a {
            display: block;
            width: 100%;
            height: 500px;

            img {
                display: block;
                width: 100%;
                height: 100%;
                opacity: .9;
            }
        }

    }
</style>
